<script setup>
    import { ref } from 'vue'
    import TitleValue from '@components/TitleValue'
    import { common, service } from '@utils'
    import { SERVE_URL } from '@utils/config'

    const props = defineProps({
        categorys: Array,
        expressMethods: Array,
        newOrOld: Array
    })

    const visible = ref(false)
    const data = ref()
    const skus = ref()

    const open = (value) => {
        data.value = { ...value }
        data.value.cover = SERVE_URL + data.value.cover
        if (data.value.mainPic) {
            data.value.mainPic = data.value.mainPic.map((item) => SERVE_URL + item)
        }
        if (data.value.detailPic) {
            data.value.detailPic = data.value.detailPic.map((item) => SERVE_URL + item)
        }
        getSkus()
        visible.value = true
    }

    const close = () => {
        visible.value = false
        data.value = {}
    }

    const getSkus = async () => {
        const res = await service.bfqz.goodsDetailAll({ goodsId: data.value.id })
        skus.value = res
    }

    //把方法暴露给父组件
    defineExpose({
        open
    })
</script>

<template>
    <el-dialog
        v-model="visible"
        title="详情"
        center
        @close="close"
        destroy-on-close
        width="80%"
        top="8vh"
    >
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <section style="max-height: 65vh" class="scroll-y paddingR10">
                    <el-row>
                        <el-col :span="8">
                            <title-value title="商品名称:" :value="data.name" />
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="免费服务:">
                                <el-checkbox disabled v-model="data.bayOut" label="买断" />
                                <el-checkbox disabled v-model="data.relet" label="续租" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品分类:" prop="type">
                                <el-cascader disabled v-model="data.type" :options="categorys" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <title-value title="起租天数:" :value="data.startRentDays" />
                        </el-col>
                        <el-col :span="8">
                            <title-value title="最低日租金:" :value="data.rentPriceForDay" />
                        </el-col>
                        <el-col :span="8">
                            <title-value title="意外保障:" :value="data.protect" />
                        </el-col>
                        <el-col :span="8">
                            <title-value title="租金比例:" :value="data.rentRatio" />
                        </el-col>
                        <el-col :span="8">
                            <title-value title="买断比例:" :value="data.buyRatio" />
                        </el-col>
                        <el-col :span="8">
                            <title-value
                                title="快递方式::"
                                :value="
                                    common.getValueByKey(
                                        'val',
                                        data.fastMail,
                                        expressMethods,
                                        'label'
                                    )
                                "
                            />
                        </el-col>
                    </el-row>
                    <div class="flex-align paddingY8">
                        <div class="color-2 marginR30">封面图:</div>
                        <el-image
                            class="large-image marginR10"
                            :src="data.cover"
                            :preview-src-list="[data.cover]"
                        ></el-image>
                    </div>
                    <div class="flex-align paddingY8" v-if="data.mainPic">
                        <div class="color-2 marginR15">商品主图:</div>
                        <el-image
                            class="large-image marginR10"
                            v-for="(item, index) in data.mainPic"
                            :src="item"
                            :initial-index="index"
                            :preview-src-list="data.mainPic"
                            :key="index"
                        ></el-image>
                    </div>
                    <div class="flex-align paddingY8" v-if="data.detailPic">
                        <div class="color-2 marginR15">商品主图:</div>
                        <el-image
                            class="large-image marginR10"
                            v-for="(item, index) in data.detailPic"
                            :src="item"
                            :initial-index="index"
                            :preview-src-list="data.detailPic"
                            :key="index"
                        ></el-image>
                    </div>
                </section>
            </el-tab-pane>
            <el-tab-pane label="商品SKU" v-if="skus && skus.length > 0">
                <section style="max-height: 65vh" class="scroll-y paddingR5">
                    <el-card v-for="(item, index) in skus" :key="index" class="marginB10">
                        <template #header>
                            <div class="font3 color-2">商品规格</div>
                        </template>
                        <el-row>
                            <el-col :span="8">
                                <title-value title="型号:" :value="item.model" />
                            </el-col>
                            <el-col :span="8">
                                <title-value title="颜色:" :value="item.color" />
                            </el-col>
                            <el-col :span="8">
                                <title-value title="内存规格:" :value="item.norms" />
                            </el-col>
                            <el-col :span="8">
                                <title-value title="溢价:" :value="item.premium" />
                            </el-col>
                            <el-col :span="8">
                                <title-value title="市场价:" :value="item.price" />
                            </el-col>
                            <el-col :span="8">
                                <title-value
                                    title="新旧程度:"
                                    :value="
                                        common.getValueByKey(
                                            'val',
                                            item.newAndOldDegree,
                                            newOrOld,
                                            'label'
                                        )
                                    "
                                />
                            </el-col>
                            <el-col :span="8" class="flex-align" v-if="item.skuPic">
                                <div class="color-2 marginR30">SKU图片:</div>
                                <el-image
                                    class="large-image"
                                    :src="SERVE_URL + item.skuPic"
                                    :preview-src-list="[SERVE_URL + item.skuPic]"
                                ></el-image>
                            </el-col>
                            <el-col :span="8">
                                <title-value title="押金:" :value="item.deposit" />
                            </el-col>
                            <el-col :span="8">
                                <title-value title="库存:" :value="item.stock" />
                            </el-col>
                        </el-row>
                        <section>
                            <div class="font2 color-2">租期及租金:</div>
                            <el-row class="marginT10">
                                <el-col :span="8">
                                    <title-value title="1天及以上:" :value="item.rent1" />
                                </el-col>
                                <el-col :span="8">
                                    <title-value title="7天及以上:" :value="item.rent7" />
                                </el-col>
                                <el-col :span="8">
                                    <title-value title="30天及以上:" :value="item.rent30" />
                                </el-col>
                                <el-col :span="8">
                                    <title-value title="90天及以上:" :value="item.rent90" />
                                </el-col>
                                <el-col :span="8">
                                    <title-value title="180天及以上:" :value="item.rent180" />
                                </el-col>
                                <el-col :span="8">
                                    <title-value title="365天及以上:" :value="item.rent365" />
                                </el-col>
                            </el-row>
                        </section>
                    </el-card>
                </section>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
